<template>
    <div id="center">
        <div class="up">
        <div
        class="bg-color-black item"
        v-for="(item,index) in titleItem"
        :key="index"
        >
        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
        <div>
        <dv-digital-flop
        class="dv-dig-flop ml-1 mt-2 pl-3"
        :config="item.num"
        />
        </div>
        </div>
        </div>
        <div class="down">
            <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
                <span class="fs-xl text mx-2 mb-1 pl-3">年度销量排行</span>
                <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking"/>
            </div>
            <div class="percent">
            <div class="item bg-color-black">
            <span>今日成交率</span>
            <CenterChart
            :id="rate[0].id"
            :tips="rate[0].tips"
            :colorObj="rate[0].colorData"
            />
            </div>
            <div class="item bg-color-black">
            <span>本月成交率</span>
            <CenterChart
            :id="rate[1].id"
            :tips="rate[1].tips"
            :colorObj="rate[1].colorData"
            />
            </div>
            <div class="water">
            <span>今年成交率</span>
            <dv-water-level-pond class="dv-wa-le-po" :config="water" />
            </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as DataApi from "@/http/DataApi.js";
    import CenterChart from '@/components/echart/center/centerChartRate'

    export default {
        data() {
            return {
                titleItem: [
                  {
                    title: [],
                    num: {
                      number: [],
                      toFixed: 1,
                      textAlign: 'left',
                      content: '{nt}',
                      style: {
                        fontSize: 26
                      }
                    }
                  },{
                        title: [],
                        num: {
                            number: [],
                            toFixed: 1,
                            textAlign: 'left',
                            content: '{nt}',
                            style: {
                                fontSize: 26
                            }
                        }
                    },{
                        title: [],
                        num: {
                            number: [],
                            toFixed: 1,
                            textAlign: 'left',
                            content: '{nt}',
                            style: {
                                fontSize: 26
                            }
                        }
                    },{
                        title: [],
                        num: {
                            number: [],
                            toFixed: 1,
                            textAlign: 'left',
                            content: '{nt}',
                            style: {
                                fontSize: 26
                            }
                        }
                    },{
                        title: [],
                        num: {
                            number: [],
                            toFixed: 1,
                            textAlign: 'left',
                            content: '{nt}',
                            style: {
                                fontSize: 26
                            }
                        }
                    },{
                        title: [],
                        num: {
                            number: [],
                            toFixed: 1,
                            textAlign: 'left',
                            content: '{nt}',
                            style: {
                                fontSize: 26
                            }
                        }
                    }
                ],
                ranking: {
                    data: [],
                    carousel: 'single',
                    unit: '万元'
                },
                water: {
                  data: [],
                  shape: 'roundRect',
                  formatter: '{value}%',
                  waveNum: 3
                },
                // 通过率和达标率的组件复用数据
                rate: [
                  {
                    id: 'centerRate1',
                    tips: 0,
                    colorData: {
                      textStyle: '#3fc0fb',
                      series: {
                        color: ['#00bcd44a', 'transparent'],
                        dataColor: {
                          normal: '#03a9f4',
                          shadowColor: '#97e2f5'
                        }
                      }
                    }
                  },
                  {
                    id: 'centerRate2',
                    tips: 0,
                    colorData: {
                      textStyle: '#67e0e3',
                      series: {
                        color: ['#faf3a378', 'transparent'],
                        dataColor: {
                          normal: '#ff9800',
                          shadowColor: '#fcebad'
                        }
                      }
                    }
                  }
                ]
            }
        },
        components: {
            CenterChart
        },
        created() {
        },
        mounted() {
            DataApi.getTurnover().then((res) => {
                for (let i=0;i<6;i++){
                    this.titleItem[i].title = res.data.title[i];
                    this.titleItem[i].num.number.push(res.data.num[i])
                }
                this.titleItem={...this.titleItem}
            });
            DataApi.getSales().then((res) => {
                this.ranking.data = res.data
                this.ranking = {...this.ranking}
            });
            DataApi.getRate().then((res) => {
                this.water.data.push(res.data[2],res.data[2])
                this.rate[0].tips=res.data[0];
                this.rate[1].tips=res.data[1]
                this.water={...this.water}
            });
        }
    }
</script>

<style lang="scss" scoped>
    #center {
        display: flex;
        flex-direction: column;
        .up {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .item {
                border-radius: 6px;
                padding-top: 8px;
                margin-top: 8px;
                width: 32%;
                height: 70px;
                .dv-dig-flop {
                    width: 150px;
                    height: 30px;
                }
            }
        }
        .down {
            padding: 6px 4px;
            padding-bottom: 0;
            width: 100%;
            display: flex;
            height: 255px;
            justify-content: space-between;
            .bg-color-black {
                border-radius: 5px;
            }
            .ranking {
                padding: 10px;
                width: 59%;
                .dv-scr-rank-board {
                    height: 225px;
                }
            }
            .percent {
                width: 40%;
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 50%;
                    height: 120px;
                    span {
                        margin-top: 8px;
                        font-size: 14px;
                        display: flex;
                        justify-content: center;
                    }
                }
                .water {
                    width: 100%;
                    .dv-wa-le-po {
                        height: 120px;
                    }
                }
            }
        }
    }
</style>
